<template>
  <div class="mine">
    <div class="top">
      <img class="avatar" :src="userInfo.photo" alt="" />
      <div class="user-info">
        <div class="username">{{ userInfo.name }}</div>
        <div class="birthday">{{ userInfo.birthday }}</div>
      </div>
    </div>
    <div class="middle">
      <div class="item">
        <van-icon class="icon" name="newspaper-o" />
        <div class="txt">我的作品</div>
      </div>
      <div class="item">
        <van-icon class="icon" name="star-o" />
        <div class="txt">我的收藏</div>
      </div>
      <div class="item">
        <van-icon class="icon" name="tosend" />
        <div class="txt">阅读历史</div>
      </div>
    </div>
    <div class="bottom">
      <!-- 单元格：
               van-cell
                  属性:title:左边标题
                       value:右边内容
                       is-link:右边小箭头
                       icon:左边小图标
                       to:跳转的地址
               van-cell-group:一组  -->
      <van-cell-group>
        <van-cell
          icon="edit"
          title="编辑资料"
          is-link
          to="/mine/edit"
        ></van-cell>
        <van-cell icon="chat-o" title="小智同学" is-link to="/chat"></van-cell>
        <van-cell icon="setting-o" title="系统设置" is-link></van-cell>
        <van-cell
          icon="warning-o"
          title="退出登录"
          is-link
          @click="exit"
        ></van-cell>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    // this.$store.dispatch('getUserInfo')
  },
  methods: {
    // 退出点击
    exit () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '您确定退出该网站吗？'
        })
        .then(() => {
          this.$store.commit('logout')
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
.top {
  background-color: #3296fa;
  padding: 25px 15px;
  display: flex;
  align-items: center;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .user-info {
    color: #fff;
    font-size: 16px;
    .username {
      font-weight: 700;
    }
    .birthday {
      background-color: #fff;
      color: #3296fa;
    }
  }
}
.middle {
  display: flex;
  align-items: center;
  .item {
    flex: 1;
    text-align: center;
    padding: 20px 0;
    .icon {
      font-size: 26px;
      margin-bottom: 10px;
    }
    &:nth-child(1) {
      .icon {
        color: #8dbdff;
      }
    }
    &:nth-child(2) {
      .icon {
        color: #ff3800;
      }
    }
    &:nth-child(3) {
      .icon {
        color: #ffaf6c;
      }
    }
  }
}
</style>
